<template>
    <div class="goods-list">
        <!-- <router-link :to="'/home/goodsinfo/'+(index+1)" class="goods-item" v-for="(item,index) in goodslist" :key="item.src" tag="div">
            <img :src="item.src" alt="">
            <h1 class="title">{{item.title}}</h1>
            <div class="info">
                <p class="price">
                    <span class="now">¥{{item.newPrice}}</span>
                    <span class="old">¥{{item.oldPrice}}</span>
                </p>
                <p class="sell">
                    <span>热卖中</span>
                    <span>剩余{{item.leftNum}}件</span>
                </p>
            </div>
        </router-link> -->

        <!-- 在网页中，有两种跳转方式，
                1.使用a标签的跳转形式叫做标签跳转
                2.使用window.location.href进行跳转的方式叫做 编程式导航-->
        <!-- <div class="goods-item" v-for="(item,index) in goodslist" :key="item.src" @click="goDetail(index)"> -->
            
            <!-- 我们该用公共仓库store中的state中的数据来渲染页面 -->
        <div class="goods-item" v-for="(item,index) in $store.state.dataInGoodsListVue" :key="item.src" @click="goDetail(index)">
            <img :src="item.src" alt="">
            <h1 class="title">{{item.title}}</h1>
            <div class="info">
                <p class="price">
                    <span class="now">¥{{item.newPrice}}</span>
                    <span class="old">¥{{item.oldPrice}}</span>
                </p>
                <p class="sell">
                    <span>热卖中</span>
                    <span>剩余{{item.leftNum}}件</span>
                </p>
            </div>
        </div>

        <!-- <mt-button type="danger" size="large" @click="getMoreGoodsList">加载更多</mt-button> -->

        <!-- 我们改用store中的mutations里面的函数来实现获取数据和更新数据，getMoreGoodsList()函数里面代码已经改为 this.$store.commit(xxxx)-->
        <mt-button type="danger" size="large" @click="getMoreGoodsList">加载更多</mt-button>
    </div>
    
</template>

<script>
export default {
    data(){
        return {
            // data 是自己组件内部，挂在一些私有的数据
            // goodslist:[] 我们把这个数据挂载到了store中去了，方便后期其他组件的调用
            /** 
             * 我们使用存储在公共仓库store上的数据，这里是私人的仓库，就不挂载数据了
            */
           
        }
    },
    created(){
        // this.getGoodsList(); 
        this.getGoodsList(); //我们改用store中的mutations里面的函数来实现获取数据和更新数据，getGoodsList()函数里面代码已经改为 this.$store.commit(xxxx)
    },
    methods:{
        getGoodsList(){
            // var originList = [
            //     {
            //         src:'//g-search1.alicdn.com/img/bao/uploaded/i4/i2/2616970884/O1CN01vQJKnV1IOuf3NnNah_!!0-item_pic.jpg_250x250.jpg_.webp',
            //         title:'【下单最高减500元】Apple/苹果 iPhone XR 全网通4G手机双卡双待 苹果iPhoneXR 苹果xr',
            //         newPrice:5488,
            //         oldPrice:6288,
            //         leftNum:45,
            //     },
            //     {
            //         src:'//g-search2.alicdn.com/img/bao/uploaded/i4/i4/1714128138/O1CN01ZO6zKO29zFiq1Zf7w_!!0-item_pic.jpg_250x250.jpg_.webp',
            //         title:'【旗舰新品 6期免息】Xiaomi/小米 Redmi K20 Pro 新品大屏三摄骁龙855手机9官方旗舰店正品note7红米k20pro',
            //         newPrice:5488,
            //         oldPrice:6288,
            //         leftNum:45,
            //     },
            //     {
            //         src:'//g-search2.alicdn.com/img/bao/uploaded/i4/i1/1695308781/O1CN016EJo1O2EjkOM4Wsy9_!!0-item_pic.jpg_250x250.jpg_.webp',
            //         title:'【7天内可发货】Meizu/魅族 16s旗舰新品4G智能全网通4800万OIS光学防抖骁龙855全面屏手机',
            //         newPrice:5488,
            //         oldPrice:6288,
            //         leftNum:45,
            //     },
            //     {
            //         src:'//g-search3.alicdn.com/img/bao/uploaded/i4/i4/2616970884/O1CN01rK5qIr1IOueyW4oH1_!!0-item_pic.jpg_250x250.jpg_.webp',
            //         title:'【下单立减150元】Apple/苹果 iPhone 8 64G 移动联通电信全网通4G手机 官方正品苹果iPhone8',
            //         newPrice:5488,
            //         oldPrice:6288,
            //         leftNum:45,
            //     },
            //     {
            //         src:'//g-search3.alicdn.com/img/bao/uploaded/i4/i2/901409638/O1CN01s8g6ey2L4FovapMfh_!!0-item_pic.jpg',
            //         title:'【新品上市 顺丰速发】OPPO K3 骁龙710屏幕指纹全面屏拍照4G智能手机全网通正品官方闪充游戏oppok3 k1',
            //         newPrice:5488,
            //         oldPrice:6288,
            //         leftNum:45,
            //     },
            //     {
            //         src:'//g-search2.alicdn.com/img/bao/uploaded/i4/i2/2838892713/O1CN01f9bypi1Vub44GPNC7_!!0-item_pic.jpg',
            //         title:'【旗舰领航】Huawei/华为P30 Pro曲面屏超感光徕卡四摄变焦双景录像980智能手机p30pro',
            //         newPrice:5488,
            //         oldPrice:6288,
            //         leftNum:45,
            //     },
            // ]//商品的信息
            // this.goodslist = originList;

            /** 
             * 直接使用公共仓库store中的mulations中的方法来获取我们的数据
            */
           this.$store.commit('getDataInGoodsListVue');
        },
        getMoreGoodsList(){
            // 获取商品列表
            // this.$http.get('').then(res=>{
            //     // 发总请求来获取数据，由于缺少API接口。我们伪装了一个假的功能
            // })
            // for(var i = 0;i< 6;i++){
            //     var newgetgoodslist = [];
            //     newgetgoodslist[i] = this.goodslist[i];
            //     this.goodslist.push(newgetgoodslist[i]);
            // }

            this.$store.commit('getMoreDataInGoodsListVue');
        },
        goDetail(index){//使用js的方式进行页面跳转
            // 一定要区分this.$route和this.$router这两个对象
            // 其中，this.$route是路由参数对象，所有路由中的参数，params，query都属于它
            // this.$router是一个路由导航对象，用它可以方便的使用js代码来实现路由的前进、后退、跳转到新的URL地址
            // console.log(index);
            // console.log(this.$route)
            // console.log(this.$router)

            // 1.这是最简单的跳转方式
            // this.$router.push('/home/goodsinfo/'+(index+1));
            // 2.传递一个配置对象
            // this.$router.push({
            //     path:'/home/goodsinfo/'+(index+1)
            // })
            // 3.传递一个命名的路由
            this.$router.push({
                name:'goodsinfo', //某个路由对应规则的名字属性值，在定义路遇规则时用 name 属性命名的
                params:{
                    index:index+1,
                }
            })

            

        }
    }
}
</script>



<style lang="scss" scoped>
.goods-list{
   display: flex;
   flex-wrap: wrap; 
   // 给大盒子左右加上padding距离，留出间隙
   padding: 8px;
   // 内部小盒子贴边对齐
   justify-content: space-between;
   .goods-item{
       width: 49%;
       border: 1px solid #cccccc;
       box-shadow: 0,0,8px,#cccccc;
       margin-bottom: 8px;
       padding:2px;

       //
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       min-height: 320px;
       img{
           width: 100%;
       }
       .title{
           font-size: 14px;
       }
       .info{
           background-color: #eee;
           p{
               margin: 0;
               padding: 5px;
           }
           .price{
               .now{
                   color: red;
               }
               .old{
                   text-decoration: line-through;
                   margin-left: 10px;
               }
           }
           .sell{
               display: flex;
               justify-content: space-between;
           }
       }
   }
}
</style>
